class: center, middle, inverse, title-slide # Title ## Subtitle ### Author ### Date --- # Installing These are slides made with the **xaringan** package which is on CRAN available, but I recommend installing the development release from
```r devtools::install_github('yihui/xaringan') ``` .pull-left[ You will also need two other CSS files for the custom University of Duisburg-Essen styling: - `edu_fonts.css` - `edu.css` ] .pull-right[ If you want the University signet to show up on the title slide, you'll also need: - `signet_ude_rgb_neg.png` ] These are available in the assets folder of the GitHub code repository [
`jens-klenke/ude_slides`](https://github.com/jens-klenke/ude_slides/tree/main/01_slides/assets) To make things easy to get started, I recommend downloading a copy of the `ude_slides` repo [
](https://github.com/jens-klenke/ude_slides/archive/main.zip) and make changes to the slides. ??? NOTES NOTES --- # xaringan - Press `h` or `?` to see the possible shortcuts you can use in remark.js. - You can see all the goodies like this (hint press `p`). - Check out more in-depth tutorial [here](https://slides.yihui.name/xaringan/#1) --- ## Why xaringan/remark.js?
- Printing (in Google Chrome) is a lot more reliable for xaringan/remark.js - The customisation of the CSS and using it is a lot easier in xaringan/remark.js - You almost never need to write any manual HTML chunks (e.g. `<div style="text-align: center;"></div>`) - With remark.js' Markdown, you can add arbitrary CSS classes to elements using syntax `.className[elements]`, which is very handy compared to `<span class="className"></span>` - You can write slide notes under three question marks `???`. These notes are only displayed in the presentation mode, and only the speaker can see these notes. - The keyboard shortcuts: press keys like `P` (presentation mode), `C` (clone slides to a new window, useful for presentation mode), `B` (black out), `M` (mirror the slide), and `H` (help), etc. More: [yihui.name/en/2017/08/why-xaringan-remark-js/](https://yihui.name/en/2017/08/why-xaringan-remark-js/) --- # YAML, Slides and Notes The `YAML` is the head of the document in which one defines all the settings and certain aspects as author, title, date. To start a new slide use three dashes `---` on a new line with no trailing white space. If the dashes aren't on their own line or there's a white space after it won't work. ``` --- ``` If we want to change the style of a slide we can do so with the option `class` directly after the three dashes for a new slide. ``` --- class: columns-2 ``` Similar to start a new line use three questionmarks `???` on a new line with no trailing white space, to take notes for your presentation. ``` ??? ``` --- # Embaded `R` Code .font70[ With Rmarkdown/xaringan `R` code can directly implemented. There are two ways to implement R Code. If we want to use r code *inline*, we wrap the command around .ilr[r ]. For example if we want to write some continuous text which tells us how many variables the `mtcars` data set has, we just write .ilr[r dim(mtcars)[2]] (`mtcars` has 11 variables). For bigger outputs, for instance plots or a summary of a `lm` object, there exists an other method. We start a new line with .olr[{r}] and start in the next line with our `R` code, to close the `R`-chunk we just write .olr[ ]. Example: .pull-left[  ] .pull-right[ ```r ggplot2::ggplot(mtcars, aes(x = mpg, y = hp))+ geom_point()+ theme_minimal() ``` <!-- --> ]] .pull-down[ More information how to use and format `R` output in a `R Markdown` can be found on the [RStudio](https://rmarkdown.rstudio.com/lesson-1.html) site. ] --- # Scrolling `R` Output If you just want a section of the output to be scrollable (not the whole page). You need to define how many lines you want the "box" to show. There are classes for `.scroll-box-8[]` for 8 lines, `.scroll-box-10[]` for 10 lines, ... , `.scroll-box-20[]` for 20 lines. ### Example `.scroll-box-8[]` .scroll-box-8[ ```r swiss[,1:3] ``` ``` ## Fertility Agriculture Examination ## Courtelary 80.2 17.0 15 ## Delemont 83.1 45.1 6 ## Franches-Mnt 92.5 39.7 5 ## Moutier 85.8 36.5 12 ## Neuveville 76.9 43.5 17 ## Porrentruy 76.1 35.3 9 ## Broye 83.8 70.2 16 ## Glane 92.4 67.8 14 ## Gruyere 82.4 53.3 12 ## Sarine 82.9 45.2 16 ## Veveyse 87.1 64.5 14 ## Aigle 64.1 62.0 21 ## Aubonne 66.9 67.5 14 ## Avenches 68.9 60.7 19 ## Cossonay 61.7 69.3 22 ## Echallens 68.3 72.6 18 ## Grandson 71.7 34.0 17 ## Lausanne 55.7 19.4 26 ## La Vallee 54.3 15.2 31 ## Lavaux 65.1 73.0 19 ## Morges 65.5 59.8 22 ## Moudon 65.0 55.1 14 ## Nyone 56.6 50.9 22 ## Orbe 57.4 54.1 20 ## Oron 72.5 71.2 12 ## Payerne 74.2 58.1 14 ## Paysd'enhaut 72.0 63.5 6 ## Rolle 60.5 60.8 16 ## Vevey 58.3 26.8 25 ## Yverdon 65.4 49.5 15 ## Conthey 75.5 85.9 3 ## Entremont 69.3 84.9 7 ## Herens 77.3 89.7 5 ## Martigwy 70.5 78.2 12 ## Monthey 79.4 64.9 7 ## St Maurice 65.0 75.9 9 ## Sierre 92.2 84.6 3 ## Sion 79.3 63.1 13 ## Boudry 70.4 38.4 26 ## La Chauxdfnd 65.7 7.7 29 ## Le Locle 72.7 16.7 22 ## Neuchatel 64.4 17.6 35 ## Val de Ruz 77.6 37.6 15 ## ValdeTravers 67.6 18.7 25 ## V. De Geneve 35.0 1.2 37 ## Rive Droite 44.7 46.6 16 ## Rive Gauche 42.8 27.7 22 ``` ] .pull-down[ Customized scroll boxes must be first implemented in the `edu.css` file. ] --- ## Lists, Increments and Footnotes
.pull-left[ - Unordered lists<sup>1</sup> - can be created using "-" - and they can be nested using 2 or 4 space.fn[2] - deep nested - original nesting level ### Ordered list 1. one 2. two 3. three ] .footnote[ [1] Footnotes are not automatic. In the text use `<sup>1</sup>` or `.fn[1]` [2] At the end of the slide `.footnote[[1] Text associated with footnote 1.]` ] -- .pull-right[ To get an incremental slide use two dashes `--` on a new line with no trailing white space. If the dashes aren't on their own line or there's a white space after it won't work. .font80[.content-box-purple[ The two dash increments don't work inside class calls. For example, you can't have an increment in a `.pull-right[...]` block or in a `.columns-2[...]` block as the dashes are not considered to be special in the markdown processing when they're inside one of these blocks. ]] ] --- # Annimated Graphics ```r knitr::include_graphics("assets/power_with_densities.gif") ``` <img src="data:image/png;base64,#assets/power_with_densities.gif" width="30%" style="display: block; margin: auto;" /> --- # Interactive Graphics ```r x <- seq_len(nrow(volcano)) y <- seq_len(ncol(volcano)) plot_ly() %>% add_surface(x = ~x, y = ~y, z = ~volcano) ```
--- # Interactive Maps .font70[ ```r library(leaflet) leaflet() %>% addTiles() %>% setView(7.008403713908398, 51.46402372535478, zoom = 16) %>% addPopups(7.008403713908398, 51.46402372535478, '<b>Chair of Econometrics', options = popupOptions(closeButton = FALSE) ) ```
] --- # Embeded videos .center[ <iframe width="560" height="315" src="https://www.youtube.com/embed/vZMuu77ocMY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ] --- ## Content boxes
.content-box-blue[This is a `.content-box-blue[]` chunk. ] -- If you have just a few words, it only highlights the words: .content-box-army[`.content-box-army[]`] .content-box-yellow[`.content-box-yellow[]`] .content-box-red[`.content-box-red[]`] .content-box-purple[`.content-box-purple[]`] -- If the text includes a new line character, you get a 100% width box. I've used `.columns-2[]` it's 100% of the column width. .columns-2[ .content-box-gray[ `.content-box-gray[]` ] .content-box-green[ `.content-box-green[]` ] ] --- ## Quotes
.small[ We can include **block quotes** using<br> `<blockquote>Quote goes here</blockquote>` or<br> `> Quote goes here` or `.blockquote[Quote here]` ] .pull-left[ <blockquote> Statistics is the grammar of science. .right[-- <cite>Karl Pearson</cite>] </blockquote> .blockquote[Quote] > Quote quote ] .pull-right[.small[ ``` <blockquote> Statistics is the grammar of science. .right[-- <cite>Karl Pearson</cite>] </blockquote> .blockquote[Quote] > Quote quote ``` ]]